<!DOCTYPE html> {% load static %}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} {% endblock %}</title>

    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/sidebar.css" %}">

    <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
    <script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"></script>    
    
    {% block extra_head %} {% endblock %}
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top" style="margin-bottom:0px">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" >
                <a class="navbar-brand" href="/" style="font-size:30px">智脑系统-DDoS分类器离线训练展示系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">About</a>
                    </li>
                    
                </ul>
            </div>
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div id="wrapper" style="margin-top: 50px;">
        
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="javascript:showDiv(0);">
                        展示系统操作指引
                    </a>
                </li>
                <li>
                    <a href="javascript:showDiv(1);" style="font-size:18px">1. 获取历史数据</a>
                </li>
                <li>
                    <a href="javascript:showDiv(2);" style="font-size:18px">2. 训练分类器模型</a>
                </li>
                <li>
                    <a href="javascript:showDiv(3);" style="font-size:18px">3. 下发模型至EGP</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            {% block content %} {% endblock %}
            <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">隐藏侧边栏</a>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

<script>
    var isHidden = 0;
    $("#menu-toggle").click(function(e){
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
        if (isHidden == 0){
            isHidden = 1;
            $("#menu-toggle").text("展开侧边栏");
            $(".body-content").attr("class","container");
        }else{
            isHidden = 0;
            $("#menu-toggle").text("隐藏侧边栏");
            $(".body-content").attr("class","container-fluid");            
        }
    })
    $(document).ready(function(){
        $("#wrapper").toggleClass("toggled");
    })

    function showDiv(divID){
        var Divs = new Array("indexHtml","getDataHtml","trainModelHtml","distributeModelHtml");
        for(var i=0; i<4; i++){
            if(divID==i){
                $("#"+Divs[i]).fadeIn("slow");
            }else{
                $("#"+Divs[i]).attr("style","display:none");
            }
        }
    }
</script>

{% block extra_js_script %} {% endblock %}
    

</body>

</html>